<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 左侧图片区域 -->
      <div class="login-left">
        <img src="@/assets/login-bg.svg" alt="login" />
      </div>

      <!-- 右侧登录表单区域 -->
      <div class="login-form">
        <div class="login-header">
          <h2>后台管理系统</h2>
          <p>欢迎回来，请登录您的账号</p>
        </div>

        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          label-position="top"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="请输入用户名"
              :prefix-icon="User"
              size="large"
            />
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              :prefix-icon="Lock"
              size="large"
              @keyup.enter="handleLogin"
            />
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              :loading="loading"
              class="login-button"
              size="large"
              @click="handleLogin"
            >
              {{ loading ? "登录中..." : "登 录" }}
            </el-button>
          </el-form-item>
        </el-form>

        <div class="login-footer">
          <p>默认账号：admin</p>
          <p>默认密码：123456</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import type { FormInstance } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/store/user";
import { ElMessage } from "element-plus";

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const loginFormRef = ref<FormInstance>();
const loading = ref(false);

const loginForm = reactive({
  username: "",
  password: "",
});

const loginRules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
  ],
};

const handleLogin = async () => {
  if (!loginFormRef.value) return;

  try {
    await loginFormRef.value.validate();
    loading.value = true;

    await userStore.loginAndInitialize(loginForm.username, loginForm.password);
    
    ElMessage.success("登录成功");
    const redirect = route.query.redirect as string;
    router.push(redirect || "/");
  } catch (error: any) {
    ElMessage.error(error.message || "登录失败");
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  .login-box {
    width: 900px;
    height: 500px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    overflow: hidden;

    .login-left {
      flex: 1;
      background: #f5f7fa;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px;

      img {
        width: 100%;
        max-width: 400px;
      }
    }

    .login-form {
      width: 400px;
      padding: 40px;
      display: flex;
      flex-direction: column;

      .login-header {
        text-align: center;
        margin-bottom: 40px;

        h2 {
          font-size: 28px;
          color: #303133;
          margin: 0 0 12px;
        }

        p {
          font-size: 16px;
          color: #909399;
          margin: 0;
        }
      }

      .el-form-item {
        margin-bottom: 24px;
      }

      .login-button {
        width: 100%;
        height: 44px;
        font-size: 16px;
        margin-top: 12px;
      }

      .login-footer {
        margin-top: auto;
        text-align: center;
        color: #909399;
        font-size: 14px;

        p {
          margin: 4px 0;
        }
      }
    }
  }
}

// 响应式布局
@media screen and (max-width: 992px) {
  .login-container {
    .login-box {
      width: 100%;
      height: 100%;
      border-radius: 0;

      .login-left {
        display: none;
      }

      .login-form {
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
      }
    }
  }
}
</style>
